<template>
	<w-container class="rank" :loading="loading||isNotReady">
		<w-navbar leftIcon="back-btn" title="" :placeholder="false"></w-navbar>
		<w-image src='/static/bg/dragonTigerList.png' width="375" height="240"></w-image>
		<view class="pt-12 rank-list">
			<view class="tabList">
				<view v-for="item in tabsList" :key="item.type" :class="{'tabListAction':item.type==search.type}" @click="changeType(item.type)">{{ item.name }}</view>
			</view>
			<view class="title">
				榜单每5分钟刷新
			</view>
			<view class="table-hd">
				<view class="order">
					排名
				</view>
				<view class="user">
					用户
				</view>
				<view class="value">
					{{search.type==1? '成就值':"魅力值加成"}}
					<w-icon class="ml-10" name="q" @click='showTips=!showTips'></w-icon>
					<w-image class="tips" v-if="showTips&&search.type==1" src='/static/bg/rank-tip.png' width="218"
						height="162"></w-image>
					<w-image class="tips" v-if="showTips&&search.type==2" src='/static/bg/rank-tip-2.png' width="218"
						height="128"></w-image>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: calc(100% - 228rpx)">
				<view>
					<view class="rank-item flex" v-for="(item,i) in rank" :key="item.id">
						<view class="order flex-center flex">
							<w-image v-if="i+1<4" :src="`/static/bg/rank-${i+1}.png`" width="32" height="25"></w-image>
							<text v-else>{{i+1}}</text>
							<w-icon class="ml-12" v-if="Math.abs(item.is_up)&&item.is_up>0" size="6"
								name="up-icon"></w-icon>
							<w-icon class="ml-12" v-if="Math.abs(item.is_up)&&item.is_up<0" size="6"
								name="down-icon"></w-icon>
							<text v-if="Math.abs(item.is_up)" class="font-size-10  ml-2"
								:class="{'font-color-success':item.is_up<0,'font-color-warning':item.is_up>0}">{{Math.abs(item.is_up)}}</text>
						</view>
						<view class="user flex flex-ai-center">
							<u-avatar :src="$ossUrl+item.avatar" size='72rpx'></u-avatar>
							<view class="pl-12 flex flex-dir-col flex-ai-start">
								<text class="font-size-12 font-color-222 text-left text-overflow"
									style="max-width: 150rpx;">{{item.nickname}}</text>
								<w-image :src="item.listimg" width="75" height="26"></w-image>
							</view>
						</view>
						<view class="value flex flex-ai-center" v-if="!item.view" @click="targetView(item)">
							<w-icon name="value" v-show="search.type==1"></w-icon>
							<w-icon name="hot" v-show="search.type==2"></w-icon>
							<text class="font-color-222 font-size-20">{{item.price}}</text>
						</view>
						<view class="value flex flex-ai-center" v-else @click="toView(item)">
							<w-image src='/static/bg/view-buy.png' width="75" mode="widthFix"></w-image>
						</view>
					</view>
					<w-loading v-if="!rank.length" type="empty" emptyType="search" emptyTop="20" emptyBottom="20"
						fontColor="font-color-222"></w-loading>
				</view>
			</scroll-view>
		</view>

		<view v-if="my" class="footer flex flex-ai-center flex-js-sb">		
			<view class="flex flex-ai-center font-size-12 font-color-white">
				<u-avatar :src='$ossUrl + userInfo.avatar' size='100rpx'></u-avatar>			
				<view class="flex flex-dir-col ml-8">
					<view class="font-color-white">
						{{my.myrank}}
					</view>
					<text class="mt-4">{{userInfo.nickname}}</text>
				</view>
			</view>
			<view class="flex flex-dir-col flex-ai-center font-size-12 font-color-white">
				<view class="flex flex-ai-center">
					<w-icon name="value" v-show="search.type==1"></w-icon>
					<w-icon name="hot1" v-show="search.type==2"></w-icon>
					{{my.price}}
				</view>
				<view class="flex flex-ai-center">
					距离上榜还差
					<w-icon name="value" v-show="search.type==1"></w-icon>
					<w-icon name="hot1" v-show="search.type==2"></w-icon>
					{{my.last}}
				</view>
			</view>
		</view>
	</w-container>
</template>

<script>
	import {
		getRank
	} from '@/api/common/index.js'
	import HeaderList from './components/HeaderList.vue'
	export default {
		components: {
			HeaderList
		},
		data() {
			return {
				tabsList:[{
					name:'功高望重',
					type:1
				},{
					name:'建功立业',
					type:2
				}],
				showTips: false,
				scrollLeft: 0,
				loading: true,
				isNotReady: true,
				avatarWidth: 0,
				dataList: {
					headUser: [],
					list: [],
					rank1: [],
					rank2: [],
					my1: {},
					my2: {}
				},

				timer: null,
				search: {
					type: 1
				}
			}
		},
		computed: {
			rank() {
				if (this.search.type == 1) {
					return this.dataList.rank1
				}
				return this.dataList.rank2
			},
			my() {
				if (this.search.type == 1) {
					return this.dataList.my1
				}
				return this.dataList.my2
			}
		},
		onLoad() {
			this.getList()
		},
		onReady() {
			this.isNotReady = false
		},
		onPullDownRefresh() {
			this.getList()
		},
		methods: {
			targetView(item) {
				if (this.search.type == 1) {
					this.dataList.rank1.map((v, i) => {
						this.$set(this.dataList.rank1[i], 'view', item.id == v.id)
					})

				} else {
					this.dataList.rank2.map((v, i) => {
						this.$set(this.dataList.rank2[i], 'view', item.id == v.id)
					})
				}
				this.$forceUpdate()
			},
			toView(item) {
				uni.navigateTo({
					url: '/pages/rank/userBuy?id=' + item.id
				})
			},
			changeType(v) {
				this.search.type = v;
			},
			getList() {
				this.loading = true
				getRank().then(res => {
					this.loading = false;
					this.dataList = res.data;
					this.dataList.rank1 = this.dataList.rank1.map(v => {
						v.view = false
						return v
					})
					this.dataList.rank2 = this.dataList.rank2.map(v => {
						v.view = false
						return v
					})
				}).catch(() => {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ uni-swiper {
		height: 240rpx;
	}
	
	.tabs-box {
		width: 444rpx;
		height: 84rpx;
		background: #fff;
		border-radius: 60rpx;
		// border: 1px solid rgba(255,255,255,0.1);
		.item {
			width: 50%;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			font-size: 32rpx;
			color:#999;
		}
		.active {
			background: #FFFFFF;	
			border-radius:60rpx;
			color: #000;
			transition: all 0.3s; 
		}
	}

	.rank {
		height: calc(100vh - var(--window-top));
		height: calc(100vh - var(--window-top) - var(--window-bottom) - constant(safe-area-inset-bottom));
		height: calc(100vh - var(--window-top) - var(--window-bottom) - env(safe-area-inset-bottom));
		/deep/ .u-steps-item__wrapper {
			background-color: unset;
		}

		/deep/ .u-steps-item__line {
			background-color: white !important;
		}

		/deep/ .u-steps-item__wrapper__dot {
			background-color: white !important;
		}

		/deep/ .u-steps-item__line--column {
			top: 20rpx;
		}



		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));

		.footer {
			background: linear-gradient( 90deg, #FF7F43 0%, #FF2D23 100%);
			padding: 44rpx 36rpx;
			padding-top: 44rpx;
			// padding-bottom: 44rpx;
			@extend .plr-18;
			padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
			position: fixed;
			bottom: 0;
			width: 750rpx;
			left: 0;
		}

		.rank-list {
			width: 100%;
			height: calc(100% - 480rpx);
			background: #F5F5F5;
			
			.tabList{
				width: 444rpx;
				height: 84rpx;
				background: #FFFFFF;
				border-radius: 80rpx;
				display: flex;
				margin: 0 auto;
				
				>view{
					width: 222rpx;
					height: 100%;
					color: #999999;
					font-weight: 500;
					text-align: center;
					line-height: 84rpx;
				}
				>.tabListAction{
					background-color: #000000;
					color: #fff;
					border-radius: 60rpx;
				}
			}

			>.title {
				width: 238rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #E0E0E0;
				border-radius: 60rpx;
				font-size: 26rpx;
				color: #666;
				text-align: center;
				margin: 24rpx auto 24rpx;
			}

			.table-hd {
				width: 100%;
				height: 40rpx;
				color: #000;
				font-size:26rpx;
				display: flex;
				align-items: center;
				.value {
					position: relative;

					.tips {
						position: absolute;
						top: 40rpx;
						right: 8rpx;
						z-index: 2;
					}
				}
			}

			.order {
				width: 182rpx;
				text-align: center;
			}

			.user {
				width: 252rpx;
				text-align: center;
			}

			.value {
				@extend .flex, .flex-center, .flex-1;

			}

			.rank-item {
				height: 144rpx;
			}
		}

		.type-container {
			// background: linear-gradient(180deg, #292A3F 0%, #03031D 100%);
			background: #241521;
			margin-top: 54rpx;

			.type-item {
				padding-top: 18rpx;
				padding-bottom: 50rpx;
				color: #CECECE;
				font-size: 28rpx;
				position: relative;
			}

			.type-item.active.left {
				&::after {
					box-sizing: border-box;
					content: "功高望重";
					position: absolute;
					width: 351rpx;
					height: 122rpx;
					@extend .flex, .flex-js-center, .pt-12, .font-color-white, .font-size-16;
					bottom: 0;
					left: 0;
					font-weight: 800;
					background-image: url($IMG_URL+'/static/bg/rank-left-active.png');
					background-size: 351rpx 122rpx;
				}
			}

			.type-item.active.right {
				padding-top: 18rpx;
				padding-bottom: 24rpx;
				color: #CECECE;
				font-size: 28rpx;
				position: relative;

				&::after {
					box-sizing: border-box;
					content: "建功立业";
					position: absolute;
					width: 351rpx;
					height: 122rpx;
					font-weight: 800;
					@extend .flex, .flex-js-center, .pt-12, .font-color-white, .font-size-16;
					bottom: 0;
					left: 0;
					background-image: url($IMG_URL+'/static/bg/rank-right-active1.png');
					// transform: rotate(deg);
					background-size: 351rpx 122rpx;
				}
			}
		}



		.top {
			position: relative;


		}

	}
</style>